<template>
    <section>
        <div class="container" style="width: 100%;">
            <div class="mapMode" v-if="mode === 'map'">
                <Map ref="map" />
                <div class="btns">
                    <el-button v-for="(name, code) in dict['camera']" :key="code" @click="filterCamera(code)"
                        :style="{ backgroundColor: getBgColor(code) }">
                        <span>{{ name }}</span>
                    </el-button>
                </div>
            </div>

            <LiveList :data="videoList" v-if="showLive && webCfg.lineMode !== 1" ref="videoLiveList">
                <div class="page noBlueBg blackBg">
                    <el-pagination @current-change="changePage" :current-page="page" :page-size="limit"
                        layout="total,prev, pager, next, jumper" :total="totals">
                    </el-pagination>
                    <div class="groupBy ml20">
                        <el-select v-model="roadNo" placeholder="请选择所属中心" clearable size="mini"
                            @keyup.enter.native="getData" style="width: 120px;display: inline-block">
                            <el-option v-for="(item,no) in centers" :key="no" :label="item" :value="no">
                            </el-option>
                        </el-select>
                        <el-select v-model="groupType" placeholder="请选择分组类型" clearable size="mini"
                            style="width: 120px;display: inline-block">
                            <el-option v-for="(value, key) in groups" :key="key" :label="value" :value="key * 1">
                            </el-option>
                        </el-select>
                        <el-input v-model="groupValue" placeholder="请输入分组名称" style="width: 120px;" size="mini"
                            class="mh5" clearable></el-input>
                        <el-button size="mini" type="primary" @click="query">查询分组</el-button>
                    </div>
                </div>
            </LiveList>
        </div>
        <Toolbar :cfg="toolbarCfg" :mode="mode" :toggle="toggleMode"></Toolbar>
        <Dialog :cfg="dialogCfg" ref="dialog" v-if="mode==='error'">
            <el-form label-width="120px">
                <el-form-item label="选择人员：">
                    <el-select v-model="curUnit" placeholder="请选择单位" size="mini" @change="changeUnit">
                        <el-option v-for="item in units" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>

                    <el-select v-model="curDepartment" placeholder="请选择部门" size="mini" class="ml10"
                        @change="changeDepartment">
                        <el-option v-for="item in departments" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>

                    <el-select v-model="receive" placeholder="请选择人员" size="mini">
                        <el-option v-for="item in receives" :key="item.id" :label="item.trueName" :value="item.mobile">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
        </Dialog>
    </section>
</template>

<script>
import Map from 'comp/common/Map.vue';
import LiveList from "comp/common/LiveList";
import Toolbar from "comp/common/Toolbar";
import Dialog from 'comp/common/Dialog';

export default {

    name: "Screen",
    components: {
        Map,
        Toolbar,
        LiveList,
        Dialog
    },
    data() {
        return {
            showLive: false,
            webCfg: WebCfg,
            dict: this.$kkui.cache.get('dict'),
            mode: 'video',
            groups: this.$kkui.cache.get('dict')['cameraGroup'],
            centers: this.$kkui.cache.get('dict')['center'],
            toolbarCfg: [
                // {
                //   mode: 'map',
                //   label: '地图模式',
                //   icon: WebCfg.icons.map
                // },
                {
                    mode: 'video',
                    label: '视频模式',
                    icon: WebCfg.icons.video
                },
                // {
                //   mode: 'error',
                //   label: '相机工况',
                //   icon: WebCfg.icons.cameraInfo
                // },

            ],
            videoList: [],

            limit: 6,
            page: 1,
            pages: 1,
            totals: 0,

            roadNo: '',
            groupType: '',
            groupValue: '',

            dialogCfg: {
                width: 600,
                height: 400,
                title: '',
                closeShow: !!1,
                footerShow: !!1,
                submit: () => {
                }
            },
            units: [],
            curUnit: '',
            departments: [],
            curDepartment: '',
            receive: '',
            receives: [],
            sendBaseFlag: true,
            timer: null,

            activeEvtCode: ''


        }
    },
    mounted() {
        this.getData();
        if (this.mode === 'map') {
            this.timer = setInterval(() => {
                this.getData();
            }, 5 * 1000)
        } else {
            this.getData();
        }
    },
    computed: {
        getBgColor() {
            return (code) => {
                return WebCfg.eventColor[code];
            }
        }
    },
    methods: {
        filterCamera(code) {
            this.activeEvtCode = this.activeEvtCode === code ? '' : code;
            this.$refs.map.hiddenEvtCode = this.activeEvtCode;
        },

        toggleMode(mode) {
            this.mode = mode;
            this.getData();
            if (this.mode !== 'map') {
                this.showLive = true;
                this.timer && clearInterval(this.timer);
                this.getData();
            } else {
                this.showLive = false;
                this.timer = setInterval(this.getData, 5 * 1000)
            }

        },

        getData() {
            const cfg = {
                limit: this.mode === 'map' ? 10000 : this.limit,
                page: this.mode === 'map' ? 1 : this.page,
                roadNo: this.roadNo,
                groupType: this.groupType,
                groupValue: this.groupValue
            };
            if (this.mode === 'error') {
                cfg.state = -2;
            } else if (this.mode === 'video') {
                cfg.state = 0;
                cfg.limit = this.limit;
            }
            this.$server('camera.list', cfg).then(data => {
                this.$kkui.loading_deepBlue.hide();
                this.showLive = false;
                this.videoList = [];
                data['records'].forEach((item, idx) => {
                    if (this.mode === 'map') {
                        if (this.$kkui.typeOf(item.state) === 'null') return false;
                        this.showLive = false;
                        let color = '';
                        if (item.state === '0') {
                            color = '#1296DB';
                        } else if (item.state === '-1') {
                            color = '#C90AF2';
                        } else {
                            const _s = item['stateTwo'] <= 1 ? item.state : item.jhState;
                            color = WebCfg['eventColor'][_s];
                        }
                        const id = item.id,
                            gis = [item['longitude'], item['latitude']];

                        this.$refs.map && this.$refs.map.delMarker(id);
                        this.$refs.map && this.$refs.map.addMarker({
                            type: 'camera',
                            id,
                            color,
                            gis,
                            icon: require(`@/assets/img/common/icon/camera_${color}.png`),
                            labelHide: true,
                            data: {
                                preData: item,
                                id,
                                type: 'camera',
                                imagePath: item['imgPath'],
                                livePath: WebCfg.lineMode === 1 ? item['videoAddress'] : 'ws:' + WebCfg.api['wsUrl'] + ':' + WebCfg.api.wsPort + '/' + item['videoAddress'],
                                // livePath:  'ws:'+WebCfg.api['wsUrl]+':'+(WebCfg.api.wsPort+parseInt(idx/4))+'/'+item['videoAddress'],
                                // livePath:  'ws://172.16.16.50:11507/'+item['videoAddress'],
                                state: item.state,
                                stateTwo: item.stateTwo,
                                items: [
                                    {
                                        key: 'type',
                                        label: '类型',
                                        value: item['stateTwo'] <= 1 ? this.dict['camera'][item.state] : this.dict['camera'][item.jhState],
                                        color
                                    },
                                    {
                                        key: 'state',
                                        label: '状态',
                                        value: item['state'] === '0' ? '正常' : this.dict['status'][item['stateTwo']],
                                        color
                                    },
                                    {
                                        key: 'road',
                                        label: '路段',
                                        value: item['road'],
                                        color
                                    },
                                    {
                                        key: 'pos',
                                        label: '位置',
                                        value: item['road'] + ' ' + item['stakeNo'] + ' ' + item['name'],
                                        color
                                    }
                                ]
                            },
                        })
                    } else {
                        this.videoList.push({
                            ...item,
                            url: WebCfg.lineMode === 1 ? item['videoAddress'] : 'ws:' + WebCfg.api['wsUrl'] + ':' + WebCfg.api.wsPort + '/' + item['videoAddress'],
                            // url:'ws:'+WebCfg.api['wsUrl']+':'+(WebCfg.api.wsPort+parseInt(idx/4))+'/'+item['videoAddress'],
                            // url:'ws://172.16.16.50:'+(11507+parseInt(idx/4))+'/'+item['videoAddress'],
                            type: 'camera',
                            state: this.dict['camera'][item.state],
                            fn: () => {
                                this.mode === 'error' ? this.sendRepairOrder() : null
                            }
                        })

                        this.totals = data['total'];
                    }
                });
                // console.log(this.videoList);
                // this.$forceUpdate();
                this.showLive = true;
            })
        },

        changeUnit() {
            this.$server('org.department', {
                company: this.curUnit,
            }).then(data => {
                this.curDepartment = '';
                this.receive = '';
                this.departments = data;
            })
        },

        changeDepartment() {
            this.$server('org.user', {
                company: this.curUnit,
                department: this.curDepartment
            }).then(data => {
                this.receive = '';
                this.receives = data;
            })
        },

        sendRepairOrder() {
            this.$server('org.company').then(data => {
                this.units = data;
                this.$refs.dialog.show = true;
                this.dialogCfg.width = 550;
                this.dialogCfg.height = 210;
                this.dialogCfg.title = '派单';
                this.dialogCfg.submit = () => {
                    if (!this.receive) {
                        this.$kkui.msg({
                            icon: 0,
                            cont: '人员尚未选择！'
                        })
                    } else {
                        this.$kkui.alert({
                            icon: 0,
                            cont: '确定派单维修吗？',
                            callback: () => {
                                this.$kkui.msg({
                                    icon: 1,
                                    cont: '派单成功！'
                                });
                                this.receive = '';
                                this.receives = [];
                                this.curDepartment = '';
                                this.departments = [];
                                this.units = [];
                                this.curUnit = '';

                                this.$refs.dialog.show = false;
                            }
                        });
                    }
                };
            });
        },


        //切换分页
        changePage(page) {
            this.page = page;
            this.getData();
            this.$refs.videoLiveList.fanye();
        },

        query() {
            this.getData();
            this.$refs.videoLiveList.fanye();
        },

        closePanel() {
            this.panelShow = false;
        }


    },
    beforeDestroy() {
        this.timer && clearInterval(this.timer);
    }
}
</script>

<style scoped lang="scss">
.mapMode {
    height: 100%;

    .btns {
        width: 100px;
        position: absolute;
        top: 100px;
        left: 30px;
        z-index: 10;

        button {
            width: 100px;
            text-align: center;
            margin: 10px 0;

            span {
                color: #000;
                font-weight: bold;
            }
        }
    }
}
</style>
